<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body{
			background-color: #e1e1e1;
		}
		.container{
			width: 400px;
			height: 400px;
			background-color: #fff;
			border-radius: 50%;
			position: relative;
			animation: turnRound 1s 0s infinite linear;
		}
		@keyframes turnRound{
			0%{
				transform: rotate(0);
			}
			100%{
				transform: rotate(360deg);
			}
		}
		.container::before{
			content: '';
			display: block;
			width: 200px;
			height: 400px;
			left: 0;
			background-color: black;
			border-top-left-radius: 200px;
			border-bottom-left-radius: 200px;
		}
		.top-cycle{
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background-color: black;
			position: absolute;
			top: 0px;
			left: 100px;
			
		}
		.top-cycle::after{
			content: '';
			display: block;
			width: 20px;
			height: 20px;
			background-color: #fff;
			position: absolute;
			top: 90px;
			left: 90px;
			border-radius: 50%;
		}
		.bottom-cycle{
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background-color: white;
			position: absolute;
			top: 200px;
			left: 100px;
		}
		.bottom-cycle::after{
			content: '';
			display: block;
			width: 20px;
			height: 20px;
			background-color: black;
			position: absolute;
			top: 90px;
			left: 90px;
			border-radius: 50%;
		}
	</style>
	<body>
		<div class="container">
			<div class="top-cycle"></div>
			<div class="bottom-cycle"></div>
		</div>
	</body>
</html>
